<template>
  <div class="person">

    <h2>水温: {{ temp }}</h2>
    <h2>水位: {{ heigh }}</h2>
    <button @click="changeTemp">增加水温</button>
    <button @click="changeHeight">增加水位</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import {ref, watchEffect} from "vue";

let temp = ref(10);
let heigh = ref(0);

function changeTemp() {
  temp.value += 10
}

function changeHeight() {
  heigh.value += 10
}

watchEffect(() => {
  if (temp.value >= 60 || heigh.value >= 80) {
    console.log("水温60了或者水位80了")
  }
})

</script>


<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>